<template>
  <div class="detail-banner">
    <banner :banners="banners"/>
  </div>
</template>

<script>
import Banner from '@/components/common/swiper/Banner'
export default {
  name: 'DetailBanner',
  components: { Banner },
  props: {
    topImages: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      banners: []
    }
  },
  created () {
    this.encapsulationBanner();
  },
  methods: {
    encapsulationBanner() {
      if (this.topImages) {
        this.banners = this.topImages.map(item => {
          let banner = {};
          banner.link = '';
          banner.image = item;
          return banner;
        })
        console.log(this.banners)
      }
    }
  }
}
</script>

<style scoped>
.detail-banner {
  margin-top: -100px;
  height: 300px;
  overflow: hidden;
}
</style>
